<template>
  <vxe-column v-bind="$attrs" v-on="$listeners">
    <template slot-scope="scope">
      <el-form-item v-if="isEdit(scope.row)" label="" :prop="$attrs.field">
        <el-select
          ref="inputWidget"
          :value="ready ? getRowData : undefined"
          :size="size"
          :clearable="clearable"
          :multiple="multiple"
          :collapse-tags="true"
          :filterable="true"
          @input="onInputChange"
        >
          <el-option
            v-for="item in dropdownWidget.dropdownList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- 判断是否有default的slot -->
      <slot v-else-if="$slots.default || $scopedSlots.default" :row="scope.row" />
      <!-- 默认显示内容 -->
      <span v-else>{{ getRowValue(scope.row) }}</span>
    </template>
  </vxe-column>
</template>

<script>
import { DropdownWidget } from '@/utils/widget.js';
import { TableInlintColumnMixins } from './tableInlineColumn.js';

export default {
  name: 'InlineSelectColumn',
  props: {
    /**
     * 行内编辑组件尺寸
     */
    size: {
      type: String,
      default: 'small'
    },
    /**
     * 是否显示清空按钮
     */
    clearable: {
      type: Boolean,
      default: true
    },
    /**
     * 是否支持多选
     */
    multiple: {
      type: Boolean,
      default: false
    },
    /**
     * 下拉数据获取函数
     */
    loadDropdownData: {
      type: Function
    }
  },
  mixins: [TableInlintColumnMixins],
  data() {
    return {
      ready: false,
      dropdownWidget: new DropdownWidget(this.loadDropdownDataList)
    };
  },
  computed: {
    getRowData() {
      let row = (this.editConfig || {}).rowCopy;
      if (row == null || this.$attrs.field == null) {
        return undefined;
      }
      let path = this.$attrs.field.split('.');
      let temp = row;
      for (let i = 0; i < path.length; i++) {
        temp = temp[path[i]];
        if (temp == null) break;
      }
      if (temp != null) {
        temp = temp.toString();
        if (temp !== '') {
          temp = this.multiple ? temp.split(',') : temp;
        } else {
          temp = this.multiple ? [] : '';
        }
      }
      return temp;
    }
  },
  methods: {
    reset() {
      this.dropdownWidget.dirty = true;
      this.dropdownWidget.reloadDropdownData();
    },
    loadDropdownDataList() {
      this.ready = false;
      if (this.loadDropdownData != null) {
        return new Promise((resolve, reject) => {
          this.loadDropdownData((this.editConfig || {}).rowCopy)
            .then(data => {
              setTimeout(() => {
                this.ready = true;
              }, 0);
              resolve(data);
            })
            .catch(() => {
              this.ready = true;
              reject();
            });
        });
      } else {
        this.ready = true;
        return Promise.resolve([]);
      }
    },
    getValue(value) {
      return this.multiple ? value.join(',') : value;
    },
    getDictData(value) {
      if (this.multiple) {
        return this.dropdownWidget.dropdownList.filter(item => value.includes(item.id));
      } else {
        return this.dropdownWidget.dropdownList.find(item => item.id === value);
      }
    },
    onInputChange(val) {
      if (this.ready) this.onChange(val, undefined, this.getDictData(val));
    }
  },
  watch: {
    'editConfig.rowData': {
      handler() {
        if (this.editConfig && this.editConfig.rowData) {
          this.dropdownWidget.dirty = true;
          this.dropdownWidget.onVisibleChange(true).catch(() => {});
        }
      },
      immediate: true
    }
  }
};
</script>

<style scoped>
.el-select /deep/ .el-select__tags input.el-select__input {
  display: none;
}
</style>
